<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%-- 
    Document   : Usuario
    Created on : 24-ene-2012, 17:38:37
    Author     : inftel
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" errorPage="error.jsp"%>
<!DOCTYPE html>
<html>
    <head>        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="resources/js/jquery-1.4.2.min.js"> </script>
        <script type="text/javascript" src="resources/js/jquery.code.js"></script>
        <!-- 960 Grid -->
        <link rel="stylesheet" type="text/css" href="css/960/960.css"/>
        <link rel="stylesheet" type="text/css" href="css/960/reset.css"/>
        <link rel="stylesheet" type="text/css" href="css/960/text.css"/>
        <link rel="stylesheet" type="text/css" href="css/Estilos.css"/>
        <title>TelePaSOS - InfoUsuario</title>
    </head>
    <body>
        <jsp:include page="header.jsp"/>
        <jsp:include page="infoOperador.jsp"/>
        
        <div class="separator"></div>
        <div class="container_12">
            <div class="titulo">Información de usuario</div>
            <div class="grid_3 alpha">
                <img src="PintaImagen?image=${info_usuario.user.telefono}" class="image_user"  ALT="Foto de usuario" style="width: 180px; height: 180px;" />
            </div>
            <div class="grid_8 suffix_1 omega">
                <div class="datos">
                    <p>
                    <h3>Nombre</h3><h4>${info_usuario.user.nombre}</h4>
                    <h3>Apellidos</h3><h4>${info_usuario.user.apellidos}</h4>
                    <h3>Teléfono</h3><h4>${info_usuario.user.telefono}</h4>
                    <h3>Dirección</h3><h4>${info_usuario.user.direccion}</h4>
                    </p>
                </div>
            </div>
            <div class="clear"></div>
            <div class="titulo">Incidencias</div>
            <table class="contactos">
                <thead>
                    <tr class="fila head">
                        <th class="columna" style="padding-bottom: 5px; padding-top: 5px;">Hora del aviso</th>
                        <th class="columna" style="padding-bottom: 5px; padding-top: 5px;">Hora de atención</th>
                        <th class="columna" style="padding-bottom: 5px; padding-top: 5px;">Descripción</th>
                        <th class="columna" style="padding-bottom: 5px; padding-top: 5px;">Observaciones</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach var="A" items="${info_usuario.avisos}">
                        <tr class="fila">
                            <td class="columna" style="padding-bottom: 5px; padding-top: 5px;">${A.horaAviso}</td>
                            <td class="columna" style="padding-bottom: 5px; padding-top: 5px;">${A.horaAtencion}</td>
                            <td class="columna" style="padding-bottom: 5px; padding-top: 5px;">${A.descripcion}</td>
                            <td class="columna" style="padding-bottom: 5px; padding-top: 5px;">${A.observaciones}</td>   
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
        <div class="container_12">
            <div class="separator"></div>
            <div class="titulo">Contactos</div>
            <div class="grid_9 alpha">
                <table class="contactos">
                    <thead>
                        <tr class="fila head">
                            <th class="columna nombre" style="padding-bottom: 5px; padding-top: 5px;">Nombre</th>
                            <th class="columna apellidos" style="padding-bottom: 5px; padding-top: 5px;">Apellidos</th>
                            <th class="columna direccion" style="padding-bottom: 5px; padding-top: 5px;">Dirección</th>
                            <th class="columna telefono" style="padding-bottom: 5px; padding-top: 5px;">Teléfono</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach var="C" items="${info_usuario.contactos}">
                            <tr class="fila">
                                <td class="columna nombre" style="padding-bottom: 5px; padding-top: 5px;">${C.nombre}</td>
                                <td class="columna apellidos" style="padding-bottom: 5px; padding-top: 5px;">${C.apellidos}</td>
                                <td class="columna direccion" style="padding-bottom: 5px; padding-top: 5px;">${C.direccion}</td>
                                <td class="columna telefono" style="padding-bottom: 5px; padding-top: 5px;">${C.telefono}</td>   
                            </tr>
                        </c:forEach>
                    </tbody>                    
                </table>
            </div>
            <div class="grid_3 omega">
                <div class="separator"></div>
                <div class="separator"></div>
                <div class="titulo">Agregar contacto</div>
                <div class="separator"></div>
                <form method="POST" action="RegistrarContacto">
                    <div class="form-item">
                        <label>Nombre:</label>
                        <input type="text" name="nombre" size="20" maxlength="30" class="text"/>
                    </div>
                    <div class="form-item">
                        <label >Apellidos:</label>
                        <input type="text" name="apellidos" size="20" maxlength="45" class="text"/>
                    </div>
                    <div class="form-item">
                        <div class="separator"></div>
                        <label>Direccion:</label>
                        <input type="text" name="direccion" size="20" maxlength="45" class="text"/>
                    </div>
                    <div class="form-item">
                        <label>Teléfono:</label>
                        <input type="text" name="telefono" size="20" maxlength="15" class="text"/>
                        <input type="hidden" name="idUsuario" value="${info_usuario.user.idUsuario}" size="5" maxlength="20" readonly>
                    </div>
                    <a href onclick="$(this).closest('form').submit(); return false" role="button" class="button">Agregar</a>
                    <input type="submit" style="visibility: hidden" role="button" aria-disabled="false"/>
                </form>
            </div>
            <div class="clear"></div>
        </div>
    </body>
</html>
